<template>
    <div class="table">
<!--        <div class="crumbs">-->
<!--            <el-breadcrumb separator="/">-->
<!--                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 账户管理</el-breadcrumb-item>-->
<!--            </el-breadcrumb>-->
<!--        </div>-->
        <div class="container">
            <div class="handle-box" style="margin: 15px 0;">
                <el-button type="primary" @click="addCount">新增角色</el-button>
                <el-button type="success" @click="editRole">修改角色</el-button>
<!--                <el-button type="danger">删除角色</el-button>-->
            </div>
            <el-table :data="roleData" border stripe class="table" ref="multipleTable" @selection-change="handleSelectionChangeTable" @row-click="handleRowClick">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="roleName" align="center" label="角色名称">
                </el-table-column>
                <el-table-column prop="createActor" align="center" label="创建人">
                </el-table-column>
                <el-table-column prop="createTime" :formatter="formatTime" align="center" label="日期">
                </el-table-column>
                <el-table-column prop="remark" align="center" label="备注">
                </el-table-column>

            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="page_total" :page-size="page_size">
                </el-pagination>
            </div>
        </div>

        <!-- 新增人员弹出框 -->
        <el-dialog :title="diologTitle" :visible.sync="addVisible" width="70%" @open="show">
            <el-form ref="form" :model="form" label-width="80px" style="border: 1px solid #EBEEF5;margin-bottom: 10px;padding-top: 18px;">
                <el-form-item label="角色名称" class="limit-width">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="备注" style="margin-left: 10%;margin-right: 10%;">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.more"></el-input>
                </el-form-item>
            </el-form>

            <el-table height="250"
                      border stripe
                      style="width: 100%" :data="menuData" class="table"  ref="roleDataTable" @selection-change="handleSelectionChange" @row-click="handleroleDataClick">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="filertRow" :formatter="filertRow" label="功能名称" align="center">
                </el-table-column>
                <el-table-column prop="pname" label="所属模块" align="center">
                </el-table-column>
            </el-table>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    import { getModelMenu ,addRole,getRoleList,getCheckedRoleList,editRole} from '../../../api/index';
    import {famatDatesTimes} from '../../common/com';
    export default {
        name: "UserStyleManger",
        data() {
            return {
                roleData:[],
                cur_page: 1,
                page_size:10,
                page_total:1,
                multipleSelection: [],
                multipleSelectionTable:[],
                diologTitle:'新增角色',
                addVisible:false,
                isEditInfo:false,
                form: {
                    name: '',
                    more: '',
                    menus:'',
                },

                menuData:[],
                checkedRoles:[],
            }
        },
        created() {
            this.getData();
            this. getDataList();
        },
        computed: {

        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.getDataList();
            },
            filertRow(row, column, cellValue, index){
                return row.chilren[0].functionName;
            },
            getDataList(){
                getRoleList({
                    pageNum:this.cur_page,
                    pageSize:this.page_size
                }).then((res)=>{
                    console.log(res);
                    this.roleData = res.list;
                    this.page_total = res.total;
                })
            },
            getCheckedRoleList(){
                if(this.multipleSelectionTable.length<=0){
                    return ;
                }
                getCheckedRoleList({
                    bitValue:this.multipleSelectionTable[0].bitValue
                }).then((res)=>{
                    console.log(res);
                    this.checkedRoles = res.datas;
                })
            },
            // 获取菜单及模块数据
            getData() {

                getModelMenu({
                }).then((res) => {
                    console.log(res)
                    var plist = [];
                    for(var i=0;i<res.list.length;i++){
                        if(res.list[i].pId<=0){
                            plist.push(res.list[i])
                        }
                    }
                    var cList = [];
                    for(var n=0;n<plist.length;n++){
                        for(var k=0;k<res.list.length;k++){
                            if(plist[n].id == res.list[k].pId){
                                var obj={};
                                obj['pname'] = plist[n].functionName;
                                obj['chilren'] =[];
                                obj.chilren.push(res.list[k])
                                cList.push(obj)
                            }
                        }
                    }
                    console.log(cList)
                    this.menuData =cList;
                })
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //点击行触发，选中或不选中复选框
            handleRowClick(row, column, event){
                this.$refs.multipleTable.toggleRowSelection(row);
            },
            //点击角色行触发，选中或不选中复选框
            handleroleDataClick(row, column, event){
                this.$refs.roleDataTable.toggleRowSelection(row);
            },
            handleSelectionChangeTable(val){
                this.multipleSelectionTable = val;
                this.getCheckedRoleList();
            },
            // 保存编辑
            saveEdit() {
                var list = [];
                console.log(this.multipleSelection)
                for(var i=0;i<this.multipleSelection.length;i++){
                    if(this.multipleSelection[i]&&this.multipleSelection[i].chilren){
                        list.push(this.multipleSelection[i].chilren[0]);
                    }
                }
                if(!this.form.name){
                    this.$message.error('请输入角色名称');
                    return ;
                }
                if(list.length<=0){
                    this.$message.error('至少为该角色分配一项功能');
                    return ;
                }
                //修改角色信息
                if(this.isEditInfo){

                    var updateData = {
                        role:{
                            roleName:this.form.name,
                            remark:this.form.more,
                            id:this.multipleSelectionTable[0].id,
                            bitValue:this.multipleSelectionTable[0].bitValue,
                            createTime:this.multipleSelectionTable[0].createTime,
                        },
                        menus:list
                    }
                    console.log(updateData);
                    editRole(updateData).then((res)=>{
                        if(res.success){
                            this.$message.success(res.message)
                            this.addVisible = false;
                            this.getDataList();
                        }else{
                            this.$message.error(res.message)
                        }
                    }).catch(()=>{
                        this.$message.error('网络连接超时')
                    })
                    return;
                }
                //新增角色
                var postData = {
                    role:{
                        roleName:this.form.name,
                        remark:this.form.more,
                    },
                    menus:list
                }
                console.log(postData);
                addRole(postData).then((res)=>{
                    if(res.success){
                        this.$message.success(`添加成功`);
                        this.addVisible = false;
                        this.getDataList();
                    }else{
                        this.$message.error(res.message);
                    }
                })
            },

            addCount(){
                this.addVisible = true;
                this.isEditInfo = false;
                this.diologTitle = '新增角色';
                this.form = {
                        name: '',
                        more: '',
                        menus:'',
                };
            },
            formatTime(row, column, cellValue, index){
                return famatDatesTimes(cellValue);
            },
            editRole(){
                if(this.multipleSelectionTable.length < 1){
                    this.$message.error('请选择需要修改的账户');
                }else
                if(this.multipleSelectionTable.length == 1){
                    this.addVisible = true;
                    this.isEditInfo = true;
                    this.diologTitle = '修改角色';
                    this.form.name = this.multipleSelectionTable[0].roleName;
                    this.form.more =  this.multipleSelectionTable[0].remark;

                }else{
                    this.$message.error('一次只能修改一个账户');
                }
                console.log(this.multipleSelectionTable)
            },
            show () {
                this.$nextTick(_ => {
                    this.$refs.roleDataTable.clearSelection();
                    if(!this.isEditInfo){
                        return ;
                    }
                    var chekedlist = [];
                    for(var i=0;i<this.checkedRoles.length;i++){
                        if(this.checkedRoles[i].pId<=0){
                            chekedlist.push(this.checkedRoles[i])
                        }
                    }
                    var cdList = [];
                    for(var n=0;n<chekedlist.length;n++){
                        for(var k=0;k<this.checkedRoles.length;k++){
                            if(chekedlist[n].id == this.checkedRoles[k].pId){
                                var obj={};
                                obj['pname'] = chekedlist[n].functionName;
                                obj['chilren'] =[];
                                obj.chilren.push(this.checkedRoles[k])
                                cdList.push(obj)
                            }
                        }
                    }
                    this.multipleSelection = cdList;

                    this.checkedRoles.forEach((item)=>{
                        this.$refs.roleDataTable.toggleRowSelection(this.menuData.find(d => parseInt(d.chilren[0].id) === parseInt(item.id)), true)  // 设置默认选中
                    })


                })
            },
        }
    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
    .limit-width{
        width: 30%;
        float: left;
        margin:0 10% 10px;

    }
    .el-form-item::after, .el-form-item::before {
        clear: both;
    }
</style>
